FIXME tag
----
====== Modification du thème de la documentation Ubuntu-fr ======

Cette page fait partie du [[:utilisateurs/aldian/chantier_responsive_design|Chantier de refonte du design]] relancé en 2017 et sert de guide aux administrateurs qui ont pris le parti de repartir de zéro. 
Une fois en place tous les éléments notés ici feront parti intégrante de l'installation en locale et la page servira ensuite uniquement d'aide-mémoire pour eux.

Il s'agit ici de compléter [[:utilisateurs/fabux/brouillons/ikiwllatsinubfr|l'installation de la documentation en locale]] par la mise en place de son thème et sa personnalisation.

<note important>Pour facilité la lecture, les chemins des fichiers indiqués partent du dossier où vous avez installé votre documentation. Il s'agira donc ici de **/var/www/html/ubuntu-fr/ubuntu-fr-doc/**</note>
===== Installation du thème =====

  * Installer le [[https://www.dokuwiki.org/template:bootstrap3|plugin bootstrap3]] depuis le gestionnaire d'extensions.
<note tip>Celà correspondra, après l'avoir téléchargée, à l'[[:wiki/mini-tutoriels#extraire_une_archive|extraire]] avec le nom **boostrap3** dans le dossier **lib/tpl** et à ajouter dans le fichier **conf/local.protected.php** la ligne suivante 
<file>$conf['template']    = 'bootstrap3';</file>
</note>
  * Activer le thème //[[https://bootswatch.com/united/|United]]// depuis les paramètres de configuration  
<note tip>Celà correspondra à [[:tutoriel:comment_modifier_un_fichier|modifier dans le fichier]] **local.protected.php** les lignes comme suit 
<file>
$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'united';
</file>
</note>

Après enregistrement de ces modifications, actualiser le navigateur: vous devriez être sur le thème United :)

===== Personnalisation des feuilles de style =====
Il est tout à fait possible de partir d'un thème existant pour l'adapter à vos envies. 

==== Récupérer un thème ====
D'autres [[:navigateurs]] le font mais [[:Firefox]] avec ses outils de développement web déjà présent par défaut, permet de récupérer la feuille de style pour l'adapter à vos envies et créer ainsi votre propre thème.

Une fois le thème //United// en place :
  - ouvrez l'éditeur de style depuis le menu développement web de Firefox accessible directement avec le raccourci clavier Maj + F7. 
  - enregistrez le fichier **bootstrap.min.css** où vous le souhaitez. 
     * Pour la suite il sera placé dans un dossier dédié de notre documentation local : **lib/tpl/bootstrap3/assets/bootstrap/themeperso1/**
  - [[:tutoriel:comment_modifier_un_fichier|modifiez le fichier]] **bootstrap.min.css** à votre convenance.

<note tip>C'est le nom de votre dossier qui défini celui de votre thème. Ne renommez en aucun cas le fichier **bootstrap.min.css** sans quoi il ne sera pas reconnu.</note>

==== Activation d'un thème personnel ====

Pour activer votre thème il faudra :
  * Modifier dans le fichier **lib/tpl/bootstrap3/conf/metadata.php** la ligne suivante <file>
$meta['bootswatchTheme']     = array('multichoice', '_choices' => array( 'darkly', 'united', 'themeperso1'));</file> C'est d'ailleurs cette même ligne qui défini la liste des thèmes que vous rendez disponible.
Ensuite depuis les paramètres de configuration : 
    * activer le menu pour les thèmes de bootswatch.com 
    * activer le répertoire local de Bootswatch
 <note tip>Celà correspondra à :
  * ajouter dans **conf/local.protected.php** la ligne <file>$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;</file>
  * à modifier dans **lib/tpl/boostrap3/conf/default.php** la ligne suivante: <file>$conf['useLocalBootswatch']          = 1;</file>
  * FIXME tester l'ajout de ''$conf['tpl']['bootstrap3']['useLocalBootswatch']          = 1;'' pour ne pas toucher au default.php
</note>

Actualiser la page du navigateur. Vous devriez avoir une icône supplémentaire vous permettant de choisir votre thème.

===== Barre de navigation =====
Dans le fichier **lib/tpl/bootstrap3/tpl_navbar.php** remplacer les lignes 33 à 53 par le contenu suivant:
<file php>
      <?php
	  
	$logo_accueil=tpl_getMediaFile(array(':wiki:accueil.png', ':accueil.png', 'images/accueil.png'), false, $logoSize);
	$logo_forum=tpl_getMediaFile(array(':wiki:forum.png', ':forum.png', 'images/forum.png'), false, $logoSize);
	$logo_planet=tpl_getMediaFile(array(':wiki:planet.png', ':planet.png', 'images/planet.png'), false, $logoSize);

        // get logo either out of the template images folder or data/media folder
        $logoSize  = array();
        $logo      = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
        $title     = $conf['title'];
        $tagline   = ($conf['tagline']) ? '<span id="dw__tagline">'.$conf['tagline'].'</span>' : '';
        $logo_size = 'height="20"';

        if ($tagline) {
          $logo_size = 'height="32" style="margin-top:-5px"';
        }

        // display logo and wiki title in a link to the home page
        tpl_link(
            '//www.ubuntu-fr.org',
            '<img src="'.$logo_accueil.'" alt="Accueil" class="pull-left" id="dw__accueil" '.$logo_size.' /> ',
            'accesskey="a" title="[A]" class="navbar-brand"'
        );
		
	tpl_link(
            wl(),
            '<img src="'.$logo.'" alt="'.$title.'" class="pull-left" id="dw__logo" '.$logo_size.' /> ',
            'accesskey="h" title="[H]" class="navbar-brand"'
        );
		
	tpl_link(
            '//forum.ubuntu-fr.org',
            '<img src="'.$logo_forum.'" alt="Forum" class="pull-left" id="dw__forum" '.$logo_size.' /> ',
            'accesskey="f" title="[F]" class="navbar-brand"'
        );
		
	tpl_link(
            '//planet.ubuntu-fr.org',
            '<img src="'.$logo_planet.'" alt="Planet" class="pull-left" id="dw__planet" '.$logo_size.' /> ',
            'accesskey="p" title="[P]" class="navbar-brand"'
        );

	tpl_link(
            wl(),
            '<span id="dw__title" '.($tagline ? 'style="margin-top:-5px"': '').'>'. $title . $tagline .'</span>',
            'accesskey="t" title="[T]" class="navbar-brand"'
        );

      ?>
</file>

Il vous faudra mettre les icônes suivantes: FIXME  lien et chemin exact à remplacer
  * lien|accueil.png : dans les dossiers data/wiki/ , data/ , images/
  * lien|forum.png : dans les dossiers data/wiki/ , data/ , images/
  * lien|planet.png : dans les dossiers data/wiki/ , data/ , images/
  * lien|guide.png : dans les dossiers data/wiki/ , data/ , images/


<note>FIXME Je garde ça sous le coude 


Autre Installer le Plugin [[https://www.dokuwiki.org/%3Aplugin%3Abootswrapper|Bootswrapper]]

<note tip>Celà correspondra à ajouter dans **conf/local.protected.php** la ligne suivante : 
<file>$conf['loadBootstrap'] = 1;</file>
</note>

<note important>Cette extension nécessite le module SimpleXML pour php. Vérifier que vous l'avez bien
<code>php -m | grep -i simplexml</code>devrait vous répondre <code>SimpleXML</code>
Sinon installez-le
</note>

Activer le module navbar en modifiant dans **lib/tpl/bootstrap3/conf/default.php** la ligne suivante
<file>$conf['useLegacyNavbar']             = 1;</file>

<file>
<nav type="tabs">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>
</file>
</note>

===== Logo et favicon ====

Pour mettre en place le logo et le favicon FIXME

===== DIVERS =====

FIXME voir si c'est utile ou pas de noter ça:

Option sur bootswatch
  * //open in jsfiddle// : Permet de FIXME
  * //bootstrap.min.css// : FIXME semble être la version non indenté de bootstrap.css
  * //bootstrap.css// : FIXME le fichier [[wpfr>Feuilles_de_style_en_cascade|de feuilles de style]]
  * //_variable.scss// : FIXME
  * //_bootswatch.scss// : FIXME



===== Autres liens =====
[[:utilisateurs/aldian/chantier_responsive_design|Chantier du design]] chez aldian